

import { defineComponent, ref } from "vue";
import { FocusSwitch, FocusBox, FocusWidget, FocusScroll, usePopup } from "@/focus";
import "./index.less"

export default defineComponent({
  name: "",
  emits: [],
  props: {},

  setup() {
    const cacheId = ref("")
    const dataBox = ref(new Array(20).fill("box"))
    const dataArr = ref(new Array(9).fill("widget"))
    const { onOpen, onHide } = usePopup()
    // setTimeout(() => {
    //   cacheId.value = "widget2"
    // }, 2000);

    // setTimeout(() => {
    //   dataArr.value.splice(0, 1)
    // }, 5000);
    return {
      cacheId,
      dataArr,
      dataBox,
      onOpen,
      onHide,
    }
  },

  render() {

    return (
      <FocusSwitch class='page pagewh'>
        <FocusScroll class="focus-scroll">
          <div class="focus-box">
            {this.dataArr.map((val, i) => <FocusWidget class="focus-item">{val}{i}</FocusWidget>)}
            <FocusWidget onEnter={() => {
              console.log("主页面的enter");
              this.onOpen(<div>
                <FocusWidget onEnter={() => {
                  console.log("弹窗的enter");
                  this.onHide()
                }} class="focus-item">
                  噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢哦哦哦
                </FocusWidget>

                <FocusWidget onEnter={() => {
                  console.log("onenter3");
                  this.onOpen(<div>哈哈哈哈哈</div>)
                }} class="focus-item">
                  噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢噢哦哦哦
                </FocusWidget>
              </div>)
            }} class="focus-item">scrollNo</FocusWidget>
            {this.dataBox.map((val, idx) => {
              return <FocusBox class={'focus-box'} style={{ width: "500px" }}
                onMove={ev => console.log(ev, "onMove")}
                onMoveIn={ev => console.log(ev, "onMoveIn")}
                onMoveOut={ev => console.log(ev, "onMoveOut")}
              >
                {this.dataArr.map((v, i) => <FocusWidget widgetId={`${val}-${idx}(${v}${i})`} class="focus-item">{val}-{idx}({v}{i})</FocusWidget>)}
              </FocusBox>
            })}
          </div>
        </FocusScroll>
      </FocusSwitch>
    );
  }
})